<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>空明物联网服务平台</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/base.css" />
    <style>
        .wtitle {
            display: block;
            padding: 4px;
            margin-bottom: 20px;
            line-height: 1.42857143;
            /* background-color: #fff; */
            /* border: 1px solid #ddd; */
            border-radius: 4px;
            -webkit-transition: border .2s ease-in-out;
            -o-transition: border .2s ease-in-out;
            transition: border .2s ease-in-out;
            background-color: #556366;
            color: #fff;
            text-align: center;
        }

        .wtitle span {
            color: #fff;
            font-size: 50px;
        }
    </style>
</head>


<body>
    <div class="container-fluid">
        <br/>
        <br/>
        <div class="bs-example" data-example-id="simple-thumbnails">
            <div class="row">
                <div class="col-xs-6 col-md-3">
                    <div class="wtitle">
                        <!-- <span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> -->
                        <h4 id="device_all">全部:0个</h4>
                    </div>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div class="wtitle">

                        <!-- <span class="glyphicon glyphicon-collapse-up" aria-hidden="true"></span> -->
                        <h4 id="device_online">在线:0个</h4>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="wtitle">
                        <!-- <span class="glyphicon glyphicon-collapse-down" aria-hidden="true"></span> -->
                        <h4 id="device_offline">离线:0个</h4>
                    </div>
                </div>

                <div class="col-xs-6 col-md-3">
                    <div class="wtitle">

                        <!-- <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> -->
                        <h4 id="device_active">激活:0个</h4>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <br/>
        <div class="panel panel-default">
            <div class="panel-body">
                只需一步，轻松接入您的设备，完成无限创想
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-body">
                欢迎加入交流QQ群: <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=6c234621b5a542f2d94ce160dcb94132133a6782564d3883ac307afe01f0d3bc">1079446485</a>
            </div>
        </div>

        <div class="footer">
            <span>© 2020 空明物联网 <a href="http://www.beian.miit.gov.cn/" target="_blank">鄂ICP备15000810号-1</a></span>
        </div>

    </div>

    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/js/base.js?version=1.0.0"></script>

    <script>
        function get_device_dashboard() {
            var aDataSet;
            new AjaxRequest({
                type: "get",
                url: getServiceURL('devicedashboard'),
                param: '',
                callBack: function (res) {
                    if (res.code == 0) {
                        $('#device_all').html('设备:' + res.data.device_dashboard.all_count + '个');
                        $('#device_online').html('在线:' + res.data.device_dashboard.online_count + '个');
                        $('#device_offline').html('离线:' + res.data.device_dashboard.offline_count + '个');
                        $('#device_active').html('激活:' + res.data.device_dashboard.active_count + '个');
                    }
                    console.log(res);
                }
            });
            return aDataSet;
        }

        $(document).ready(function () {
            get_device_dashboard();
        });
    </script>
</body>

</html>